<style lang="scss" scoped>
    @import '../../css/training.scss';
    .name-box{padding: 0px 0px 25px 25px;}
    .child-list li{margin-right: 30px;font-size: 14px;color:$mc2;margin-top: 20px;float: left;}
    .blue{color: $mco;}
    .edit-icon{cursor: pointer;}

    .main-body{margin-top: 10px;}
    .main-left{width: 59%;margin-right: 1%;float: left;}
    .main-left-head{height: 60px;line-height: 60px;background: #fcfdff;padding: 0 30px;border-bottom: 1px solid #eee;}
    .filter-input{width: 100%;}
    .main-left-body{padding: 30px;background: #fff;overflow-y: auto;height: 400px;}
    .main-right{width: 40%;float: left;}
    .main-right-head{height: 60px;line-height: 60px;background: #fcfdff;padding-left: 30px;border-bottom: 1px solid #eee;}
    .main-right-head span{color: #999;font-size: 12px;}
    .main-right-body{padding: 30px;background: #fff;overflow-y: auto;height: 400px;}
    .name-check{padding: 16px;}

    .man-list{border: 1px solid $mcbd; margin-left: 160px;background: $mcb;}

    .no-txt{width: 100%;height: 100%;text-align: center;line-height: 225px;color:$mc2;font-size: 16px;}
    .no-txt p{}

</style>

<template>
    <section>

        <section class="breadcrumb-box clearfix">
            <el-breadcrumb separator=" > " class="fl">
                <el-breadcrumb-item >培训</el-breadcrumb-item>
                <el-breadcrumb-item :to="{path: '/training/training-manage'}">培训管理</el-breadcrumb-item>
                <el-breadcrumb-item v-if="$route.meta">{{$route.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
        </section>

        <section class="training-noticebox mt">

            <section class="traniing-info-tab">
                <span v-for="item,$index in tabList" :class="{'tab-active': tabIndex ==$index}" @click="tabActive($index)">{{item}}</span>
            </section>
            <div class="notice-middle" v-show="tabIndex==0">
                <div class="last-notice">剩余可发短信：{{SmsBalance}}条</div>
                <p>提示：为保障短信正常送达，请注意用词，勿发送营销类信息，{{noticeCostOne}}元/条</p>
                <div><el-button class="recharge-btn" type="primary" @click="PayStepOne(1)">微信充值</el-button></div>
            </div>
            <div class="notice-main">
                <div class="notice-middle" v-show="tabIndex==1">
                    <div class="last-notice">剩余可发邮件条数：{{SmsBalance}}条</div>
                    <p>提示：为保障短信正常送达，请注意用词，勿发送营销类信息，{{emailCostOne}}元/条</p>
                    <div><el-button class="recharge-btn" type="primary" @click="PayStepOne(2)">微信充值</el-button></div>
                </div>
                <el-form ref="form" label-width="160px">
                    <el-form-item v-if="tabIndex==1" label="主题" class="pt30">
                        <el-input class="input" placeholder="请输入主题名称" v-model="subject"></el-input>
                    </el-form-item>
                    <!--<el-form-item v-if="tabIndex==1" label="抄送">-->
                        <!--<el-input class="input" placeholder="请输入邮箱，多个邮箱由英文间隔号隔开（选填）"></el-input>-->
                    <!--</el-form-item>-->
                    <el-form-item :label="tabIndex==0?'短信内容':'正文'">
                        <el-input type="textarea" :autosize="{ minRows:6}" v-model="noticeText"  placeholder="请输入正文内容"></el-input>
                        <!--<div class="name-box" style="height: 100px">{{noticeText}}</div>-->
                    </el-form-item>

                    <template v-if="JoinType == 2">
                        <el-form-item label="学员明细">
                            <div class="name-box">
                                <template v-if="employeeList.length == 0">
                                    <section class="no-txt">
                                        <p>暂无已报名学员</p>
                                    </section>
                                </template>
                                <template v-if="employeeList.length > 0">
                                    <ul class="child-list">

                                        <!--<li>
                                            <span :class="{'blue':isHasPhone == 0}">雪</span>
                                            <img v-if="isHasPhone == 0" class="public-icon" src="http://jhsy-img.caizhu.com/sass/images/write_ic.png" alt="">
                                        </li>-->

                                        <li v-for="item in employeeList">
                                            <span v-if="item.Aliasname.length > 0" :class="{'blue':item.isHasPhone == 0}">{{item.Aliasname}}</span>
                                            <span v-if="item.Aliasname.length == 0" :class="{'blue':item.isHasPhone == 0}">{{item.Username}}</span>


                                            <!--<img v-if="item.isHasPhone == 0" @click="doAddPhone" class="public-icon edit-icon" src="http://jhsy-img.caizhu.com/sass/images/write_ic.png" alt="">-->

                                            <!--<el-dialog
                                                    :title="dialogAddPhone.title"
                                                    :visible.sync="dialogAddPhone.centerDialogVisible"
                                                    width="460px"
                                                    center>
                                                <label class="mr20" v-if="item.Aliasname.length > 0">{{item.Aliasname}}</label>
                                                <label class="mr20" v-if="item.Aliasname.length == 0">{{item.Username}}</label>
                                                <el-input v-model="dialogAddPhone.phoneNumber"  placeholder="请输入手机号码"></el-input>
                                                <span slot="footer" class="dialog-footer">
                            <el-button class="dialog-btn-left" @click="dialogAddPhone.centerDialogVisible = false">取 消</el-button>
                            <el-button class="dialog-btn-right" type="primary" @click="doSaveEdit">增 加</el-button>
                        </span>
                                            </el-dialog>-->

                                        </li>
                                    </ul>
                                </template>

                            </div>
                            <!--<p class="notice-tip"><span class="color-main">蓝色名字</span>无电话，需补全才能收到通知</p>-->
                        </el-form-item>
                    </template>

                    <template v-if="JoinType == 1">
                        <div class="main-body clearfix man-list">
                            <div class="main-left">
                                <div class="main-left-head">
                                    <el-input
                                            class="filter-input"
                                            prefix-icon="el-icon-search"
                                            placeholder="输入关键字进行过滤"
                                            v-model="filterText">
                                    </el-input>
                                </div>
                                <div class="main-left-body">
                                    <el-tree
                                            :props="propsName"
                                            :data="nameList"
                                            node-key="EmployeeID"
                                            ref="tree"
                                            :filter-node-method="filterNode"
                                            @check-change="getChecked"
                                            default-expand-all="true"
                                            show-checkbox>
                                    </el-tree>
                                </div>
                            </div>
                            <div class="main-right">
                                <div class="main-right-head" >  <!--v-show="studyBaseData.ResourceFeeNum!=0"-->
                                    通知学员
                                    <!--<span>已选{{checkedNameList.length}}人 ,</span>-->
                                    <!--<span>还可选{{studyBaseData.SurplusNum - checkedNameList.length}}人</span>-->
                                </div>
                                <div class="main-right-body">
                                    <template v-for="one in checkedNameList">
                        <span class="name-check">
                            {{one.DepartmentName}}
                        </span>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </template>
                    <el-form-item>
                        <section class="mt60">
                            <el-button class="ml20 btn-active btn-or" @click="doNotice">通知</el-button>
                        </section>

                    </el-form-item>
                </el-form>
            </div>


            <el-dialog
                    :title="dialogLittle.title"
                    :visible.sync="dialogLittle.centerDialogVisible"
                    width="460px"
                    center>
                <el-input class="input-dialog" v-if="sendType == 1" :placeholder="dialogLittle.noticePlaceholder" v-model="noticeNeedNum"></el-input>
                <el-input class="input-dialog" v-if="sendType == 2" :placeholder="dialogLittle.emailPlaceholder" v-model="emailNeedNum"></el-input>
                <p class="word-dialog-tap">支付方式：微信支付</p>
                <p class="word-dialog-tap"  v-if="sendType == 1">收费标准：{{noticeCostOne}}元/条</p>
                <p class="word-dialog-tap"  v-if="sendType == 2">收费标准：{{emailCostOne}}元/条</p>

                <span slot="footer" class="dialog-footer">
                <el-button class="dialog-btn-left" @click="dialogLittle.centerDialogVisible = false">取 消</el-button>
                <el-button class="dialog-btn-right" type="primary" v-if="sendType == 1" @click="PayStepTwo(1)">增 加</el-button>
                <el-button class="dialog-btn-right" type="primary" v-if="sendType == 2" @click="PayStepTwo(2)">增 加</el-button>
                <!--<el-button class="dialog-btn-right" type="primary" @click="dialogLittle.centerDialogVisible = false">增 加</el-button>-->

            </span>
            </el-dialog>



            <el-dialog
                    :title="dialogTwo.title"
                    :visible.sync="dialogTwo.centerDialogVisible"
                    width="460px"
                    center>
                <p class="word-dialog-tap"  v-if="sendType == 1">本次购买将消耗你{{noticeNeedPay}}元，用微信支付。</p>
                <p class="word-dialog-tap"  v-if="sendType == 2">本次购买将消耗你{{emailNeedPay}}元，用微信支付。</p>
                <span slot="footer" class="dialog-footer">
                <el-button class="dialog-btn-left" @click="dialogTwo.centerDialogVisible = false">取 消</el-button>
                <!--<el-button class="dialog-btn-right" type="primary" v-if="sendType == 1" @click="payStepThree(1)">确 认</el-button>-->
                <!--<el-button class="dialog-btn-right" type="primary" v-if="sendType == 2" @click="payStepThree(2)">确 认</el-button>-->
                    <el-button class="dialog-btn-right" type="primary" v-if="sendType == 1" @click="account(1)">确 认</el-button>
                    <el-button class="dialog-btn-right" type="primary" v-if="sendType == 2" @click="account(2)">确 认</el-button>

            </span>
            </el-dialog>


            <el-dialog
                    :title="dialogThree.title"
                    :visible.sync="dialogThree.centerDialogVisible"
                    width="460px"
                    center>
                <p class="word-dialog-tap">登录到微信支付</p>
                <p class="word-dialog-tap">请在新开微信页面完成付款后选择：</p>

                <span slot="footer" class="dialog-footer">
                <el-button class="dialog-btn-left" @click="dialogThree.centerDialogVisible = false">付款成功</el-button>
                <el-button class="dialog-btn-right" type="primary" @click="dialogThree.centerDialogVisible = false">付款失败</el-button>
            </span>
            </el-dialog>


        </section>

    </section>
</template>

<script>

	import qs from 'qs'
	import com from 'js/common'

	export default{
		data: function(){
			return {
				tabIndex:0,
				// tabList:['短信通知','邮件通知'],
				dialogLittle:{
					centerDialogVisible: false,
					title:'充值',
					noticePlaceholder:'请输入所需短信条数',
                    emailPlaceholder:'请输入所需邮件条数',
				},
				dialogTwo:{
					centerDialogVisible: false,
					title:'充值',
				},
				dialogThree:{
					centerDialogVisible: false,
					title:'充值',
				},

				success: '',

				sendType: 1,

				noticeText:'',

				isHasPhone: '',
				employeeList:[],
				TrainName:'',
				TrainTime:'',

				dialogAddPhone:{
					title:'',
					centerDialogVisible: false,
					phoneNumber:'',
                },

				membersList :[],
                noticeCostOne: 0.05,
                noticeNeedNum: '',
				noticeNeedPay:'',

				dialogTwo:{
					title:'',
					centerDialogVisible: false,
                },
				dialogThree:{
					title:'',
					centerDialogVisible: false,
                },

				SmsBalance:'',

				subject:'',
                emailCostOne: 0.05,
                emailNeedNum:'',
                emailNeedPay:'',
				EmailBalance: '',

				propsName: {
					label: 'DepartmentName',
					children: 'Child',
                    disabled:'Notify'
				},
				filterText: '',
				nameList:[],
				checkedNameList:[],

				JoinType: '',

				orderType: 3,
				buyNum: '',
				pay:'',

				Address:'',
				EnrollStartTime:'',
				EnrollStopTime:'',

            }
		},
		mixins: [mixinMethods],
		methods: {
			tabActive(i){
				let self = this;
				self.tabIndex = i;

				self.sendType = i+1;

            },
            toNotifyTrain(){
				let TrainID = this.$route.query.TrainID;

            },
            getTrainTitle(){
				let TrainID = this.$route.query.TrainID;
				let JoinType =  this.$route.query.JoinType;

				axios.post('/com/train/get', qs.stringify({
					TrainID : TrainID,
				})).then( (res) => {
					var d = res.data;
					if(d.flag == 1){

						this.TrainName = d.data.TrainName;
						this.TrainTime = d.data.TrainTime;
						this.Address = d.data.Address;
						this.EnrollStartTime =  new Date(d.data.EnrollStartTime);
						this.EnrollStopTime =  new Date(d.data.EnrollStopTime);

						let NotifyEnrollStatus = this.$route.query.NotifyEnrollStatus;
						if(NotifyEnrollStatus == 0){
							if(JoinType == 2){
								let startTime = this.EnrollStartTime ? com.dateFormat(this.EnrollStartTime,'yyyy-MM-dd') :'';
								let endTime = this.EnrollStopTime ? com.dateFormat(this.EnrollStopTime,'yyyy-MM-dd') :'';
                                var self = this;
                                this.ExamTitle = d.data.ExamTitle;
                                //以下用的开源的生成短连接API接口,线上网址suo.im
                                axios.post('/com/notice/shortUrl', qs.stringify({
                                    url:'https://jhsy.jinghao.com/sass/train-detail?trainID='+TrainID
                                })).then( (res) => {
                                    var d = res.data;
                                    if(d.flag == 1){
                                        if(startTime == endTime){
                                            self.noticeText ='《'+ self.TrainName + '》培训报名时间: '+ startTime+'，点击链接报名：'+d.data.url;
                                        }else{
                                            self.noticeText ='《'+ self.TrainName + '》培训报名时间: '+ startTime+'至'+endTime+'，点击链接报名：'+d.data.url;
                                        }
                                    }else{
                                        this.$message.error(d.msg);
                                    }
                                });
							}else if(JoinType == 1){
								this.noticeText ='《'+ this.TrainName + '》将于 '+ this.TrainTime+' 开始培训，请准时参加！地址：'+ this.Address +'。';
							}
                        }else if(NotifyEnrollStatus == 1){
							this.noticeText ='《'+ this.TrainName + '》，将于 '+ this.TrainTime+' 开始培训，请准时参加！地址：'+ this.Address +'。';
                        }


					}else{
						this.$message.error(d.msg);
					}
				} )
            },

            getEmployeeList(){
				let TrainID = this.$route.query.TrainID;
				let JoinType = Number(this.$route.query.JoinType);
				let NotifyEnrollStatus = this.$route.query.NotifyEnrollStatus;
				if(NotifyEnrollStatus == 1){
					axios.post('/com/train/getAllEnrollMembers', qs.stringify({
						TrainID: TrainID,
					})).then( (res) => {
						var d = res.data;
						if(d.flag == 1){
							this.employeeList =d.data;
							let arr = this.employeeList;

							var result = [];
							for (var i = 0; i < arr.length; i++) {
								var rObj = new Object();
								rObj["Mobile"] = arr[i].Mobile;
								rObj["EmployeeID"] = arr[i].EmployeeID;
								rObj["Email"] = arr[i].Email;
								result.push(rObj);
							}

							this.membersList = result;
						}else{
							this.$message.error(d.msg);
						}
					} );
                }else if(NotifyEnrollStatus == 0){
					if(JoinType == 2){

						axios.post('/com/train/getTrainMembers', qs.stringify({
							TrainID: TrainID,
						})).then( (res) => {
							var d = res.data;
							if(d.flag == 1){


								this.employeeList =d.data;

								let arr = this.employeeList;

								var result = [];
								for (var i = 0; i < arr.length; i++) {
									var rObj = new Object();
									rObj["Mobile"] = arr[i].Mobile;
									rObj["EmployeeID"] = arr[i].EmployeeID;
									rObj["Email"] = arr[i].Email;
									result.push(rObj);
								}

								this.membersList = result;


//   员工无号码情况下--
								/*this.employeeList.push({Aliasname: "usay",Mobile:"",Username:"李然"});  // 处理无号码员工--添加号码
                                this.employeeList.forEach(item=>{
                                    item["isHasPhone"] = "0";

                                        if(item.Mobile.length == 0){
                                            item["isHasPhone"] = "0";
                                        }else if(item.Mobile.length == undefined){
                                            item["isHasPhone"] = "0";
                                        }else if(item.Mobile.length > 0){
                                            item["isHasPhone"] = "1";
                                        }
                                });*/




							}else{
								this.$message.error(d.msg);
							}
						} );
					}else if(JoinType == 1){
						this.getAllMemberList();
					}
                }

            },

			doAddPhone(){
                this.dialogAddPhone.centerDialogVisible =  true;
            },
			doSaveEdit(){

				this.dialogAddPhone.centerDialogVisible = false;
            },

            getMessageNum(){

				axios.post('/com/account/getSmsBalance', qs.stringify({

                })).then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){


                        this.SmsBalance = d.data.SmsBalance;
                        if(this.SmsBalance > 0 ){


                        }

                    }else{
                        this.$message.error(d.msg);
                    }
                } );

            },


            getEmailNum(){

				axios.post('/com/account/getEmailBalance', qs.stringify({   // 参数错误？？

                })).then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){

                        this.EmailBalance = d.data.EmailBalance;

                    }else{
                        this.$message.error(d.msg);
                    }
                } );
            },

			doNotice(){
                let self = this;
				let TrainID = this.$route.query.TrainID;
				let JoinType =  this.$route.query.JoinType;
				let NotifyEnrollStatus = this.$route.query.NotifyEnrollStatus;

				if(this.sendType == 1){

					if(this.SmsBalance ==0){
						this.$message.error('请充值后再通知');

					}else if(this.SmsBalance > 0){
//
						if(JoinType == 2){
                            if(NotifyEnrollStatus == 0){
								axios.post('/com/train/notifyEnroll', qs.stringify({

									TrainID: TrainID,
									sendType: 1,
									body: this.noticeText,
									subject:'',  //
									employees: this.membersList,

								})).then( (res) => {
									var d = res.data;
									if(d.flag == 1){

										this.$message.success('通知成功');
										setTimeout(function () {
											location.assign('/training/training-manage');
										},3000);
									}else{
										this.$message.error(d.msg);
									}
								} );
                            }else if(NotifyEnrollStatus == 1){
								axios.post('/com/train/notifyTrain', qs.stringify({
									TrainID: TrainID,
									sendType: 1,
									body: this.noticeText,
									subject:'',  //
									employees: this.membersList,
								})).then( (res) => {
									var d = res.data;
									if(d.flag == 1){
										this.$message.success('通知成功');
										setTimeout(function () {
											location.assign('/training/training-manage');
										},3000);
									}else{
										this.$message.error(d.msg);
									}
								} );

                            }

						}else if(JoinType == 1){

							this.judgeCompleteInfo();

						}
                    }

                }else if(this.sendType == 2){
					if(this.EmailBalance == 0){
						this.$message.error('请充值后再通知');

					}else if(this.EmailBalance > 0){

						if(JoinType == 2){

							axios.post('/com/train/notifyEnroll', qs.stringify({

								TrainID: TrainID,
								sendType: 2,
								body: this.noticeText,
								subject: this.subject,
								employees: this.membersList,

							})).then( (res) => {
								var d = res.data;
								if(d.flag == 1){

									this.$message.success('通知成功');
									setTimeout(function () {
										location.assign('/training/training-manage');
									},3000);
								}else{
									this.$message.error(d.msg);
								}
							} );

						}else if(JoinType == 1){

                            this.judgeCompleteInfo();

						}

                    }

                }
//-----------
            },


			PayStepOne(a){
				if(a == 1){
                    this.sendType = 1;
                    this.dialogLittle.centerDialogVisible = true;

                }else if(a == 2){
					this.sendType = 2;
					this.dialogLittle.centerDialogVisible = true;

                }

            },

            getPayPrice(a){
                if(a==1){
                	this.noticeNeedPay = this.noticeCostOne*this.noticeNeedNum;

                }else if(a == 2){
                     this.emailNeedPay = this.emailCostOne*this.emailNeedNum;

                }

            },

            PayStepTwo(t){
				if(t == 1){
					this.dialogLittle.centerDialogVisible = false;
					this.dialogTwo.centerDialogVisible = true;
					this.getPayPrice(t);

                }else if(t == 2){
					this.dialogLittle.centerDialogVisible = false;
					this.dialogTwo.centerDialogVisible = true;
					this.getPayPrice(t);
                }

            },
			payStepThree(t) {
            	if(t==1){
					this.orderType = 3;
                }else if(t == 2){
					this.orderType = 4;
                }
				if (t == 1) {
					this.dialogTwo.centerDialogVisible = false;
					this.judgeSuccess();
					if(this.success == 0){
						alert('付款失败');
						this.dialogThree.centerDialogVisible = true;
                    }else if(this.success == 1){
						alert('付款成功');
						this.dialogThree.centerDialogVisible = true;
                    }

				} else if (t == 2) {
					this.dialogTwo.centerDialogVisible = false;
					this.judgeSuccess();
					if(this.success == 0){
						alert('付款失败');
						this.dialogThree.centerDialogVisible = true;
					}else if(this.success == 1){
						alert('付款成功');
						this.dialogThree.centerDialogVisible = true;
					}
				}
			},
			account(t){
            	if(t == 1){
					this.orderType = 3;
					this.buyNum = this.noticeNeedNum;
					this.pay = this.noticeNeedPay;
                }else if(t ==2){
					this.orderType = 4;
					this.buyNum = this.emailNeedNum;
					this.pay = this.emailNeedPay;
                }
				axios.post('/com/orders/addOther', qs.stringify({
					orderType:this.orderType,
					num:this.buyNum
				})).then((res) => {
					var d = res.data;
					if(d.flag == 1){
						this.$router.push({name:'resourceResourcePay',query:{OID:d.data.OrderID,allCount:Number(this.pay).toFixed(2)}})
					}else {
						this.$message.error(d.msg)
					}
				});
			},

			judgeSuccess(){
            	return this.success;
            },

			filterNode(value, data) {
				if (!value) return true;
				return data.DepartmentName.indexOf(value) != -1;
			},
			getChecked(data,check,child){
				this.checkedNameList = this.$refs.tree.getCheckedNodes();
				this.checkedNameList = this.checkedNameList.filter((one)=>{
					return one.EmployeeID
				});



			},
            getAllMemberList(){
				let TrainID = this.$route.query.TrainID;
				axios.post('/com/train/getEmployeeTree', qs.stringify({
					trainID: TrainID
                })).then((res) => {
					var d = res.data;
					if(d.flag == 1){
						this.nameList = d.data.Row;
//                this.$refs.tree.setCheckedKeys(this.employeeIDArr);
					}else {
						this.$message.error(d.msg)
					}
				})
            },

			judgeCompleteInfo(){

				let TrainID = this.$route.query.TrainID;
                if(this.checkedNameList.length == 0){
					this.$message.error('请选择通知人员！');
                }else if(this.checkedNameList.length > 0){



                	if(this.sendType == 1){

						axios.post('/com/train/notifyTrain', qs.stringify({
							trainID: TrainID,
							sendType: 1,
							body: this.noticeText,
							subject:'',
							employees: this.checkedNameList
						})).then( (res) => {
							var d = res.data;
							if(d.flag == 1){
								this.$message.success('通知成功');
								setTimeout(function () {
									location.assign('/training/training-manage');
								},3000);
							}else{
								this.$message.error(d.msg);
							}
						} );

                    }else if(this.sendType == 2){

						axios.post('/com/train/notifyTrain', qs.stringify({
							trainID: TrainID,
							sendType: 2,
							body: this.noticeText,
							subject:this.subject,  //
							employees: this.checkedNameList
						})).then( (res) => {
							var d = res.data;
							if(d.flag == 1){
								this.$message.success('通知成功');
								setTimeout(function () {
									location.assign('/training/training-manage');
								},3000);
							}else{
								this.$message.error(d.msg);
							}
						} );
                    }

                }
            },

			goFilter(val){

            }

		},
		mounted: function(){
			this.getMessageNum();
			this.getEmailNum();
			this.getTrainTitle();
			this.getEmployeeList();

			let TrainID = this.$route.query.TrainID;
			this.JoinType =  this.$route.query.JoinType;

		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
	}


</script>
